// 使用公用钩子方法

import { ref } from 'vue'
// 导入监控元素是否进入可视区函数
import { useIntersectionObserver } from '@vueuse/core'
/**
 *
 * @param {*} apiFn 请求方法
 * @returns
 */
export const useObserver = (apiFn) => {
  // 监控元素是否进入可视区
  /**
     * 结论：
     * 1. 通过回调函数的isIntersecting判断组件或元素是否进入可视区
     * 2. 监控是一直在执行（第一次进入的时候，发请求（只发一次））
     */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // isIntersecting 判断组件或元素是否进入可视区=》true 进入 | false 离开
      console.log('判断组件或元素是否进入可视区:', isIntersecting)
      if (isIntersecting) {
        console.log('进入可视区了，发一次请求，达到目的，就关闭监控')
        apiFn()
        // 关闭监控
        stop()
      }
    },
    {
      // 露头之后立马执行
      threshold: 0
    }
  )
  return { target }
}
